<template>
  <BaseDialog v-model:visible="visible" title="用户登录" icon="User" width="500px" :show-footer="false"
    :close-on-click-modal="false" @close="resetForm">
    <div class="login-form">
      <!-- 登录表单 -->
      <el-form ref="formRef" :model="form" :rules="rules" label-width="80px" @submit.prevent="handleSubmit">
        <el-form-item label="用户名" prop="username">
          <BaseInput v-model="form.username" placeholder="请输入用户名" prefix-icon="User" size="large" clearable />
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <BaseInput v-model="form.password" type="password" placeholder="请输入密码" prefix-icon="Lock" size="large"
            show-password />
        </el-form-item>

        <el-form-item>
          <div class="login-options">
            <el-checkbox v-model="form.rememberMe">记住我</el-checkbox>
            <el-button type="text" size="small" @click="$emit('forgot-password')">
              忘记密码？
            </el-button>
          </div>
        </el-form-item>
      </el-form>

      <!-- 登录按钮 -->
      <div class="login-actions">
        <BaseButton type="primary" size="large" block :loading="loading" @click="handleSubmit">
          登录
        </BaseButton>
      </div>

      <!-- 其他登录方式 -->
      <div class="auth-divider">
        <el-divider>
          <span class="divider-text">其他登录方式</span>
        </el-divider>
      </div>

      <!-- <div class="social-login">
        <BaseButton
          type="success"
          size="large"
          block
          :loading="wechatLoading"
          :disabled="!wechatConfigured"
          @click="handleWechatLogin"
        >
          <template #icon>
            <el-icon><ChatDotRound /></el-icon>
          </template>
{{ wechatConfigured ? '微信扫码登录' : '微信登录未配置' }}
</BaseButton>

<div v-if="wechatConfigured && showWechatTip" class="wechat-tip">
  <el-text type="info" size="small">
    点击按钮将打开微信扫码登录页面
  </el-text>
</div>
</div> -->

      <!-- 切换到注册 -->
      <div class="auth-switch">
        <span class="switch-text">还没有账号？</span>
        <el-button type="text" @click="$emit('switch-to-register')">
          立即注册
        </el-button>
      </div>
    </div>
  </BaseDialog>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { computed, onMounted, reactive, ref } from 'vue'
import { useUserStore } from '../../stores/user'
import BaseButton from '../common/BaseButton.vue'
import BaseDialog from '../common/BaseDialog.vue'
import BaseInput from '../common/BaseInput.vue'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:modelValue', 'success', 'switch-to-register', 'forgot-password'])

const userStore = useUserStore()
const formRef = ref()
const loading = ref(false)

const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const form = reactive({
  username: '',
  password: '',
  rememberMe: false
})

const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 50, message: '用户名长度在 3 到 50 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
  ]
}

const handleSubmit = async () =>
{
  if (!formRef.value) return

  try
  {
    await formRef.value.validate()
    loading.value = true

    const result = await userStore.login({
      username: form.username,
      password: form.password,
      rememberMe: form.rememberMe
    })

    if (result.success)
    {
      visible.value = false
      emit('success')
    }
  } catch (error)
  {
    console.error('表单验证失败:', error)
  } finally
  {
    loading.value = false
  }
}

const checkLoginStatus = async () =>
{
  try
  {
    await userStore.checkLoginStatus()
    if (userStore.isLoggedIn)
    {
      visible.value = false
      emit('success')
      ElMessage.success('微信登录成功')
    }
  } catch (error)
  {
    console.error('检查登录状态失败:', error)
  }
}

const resetForm = () =>
{
  if (formRef.value)
  {
    formRef.value.resetFields()
  }
  Object.assign(form, {
    username: '',
    password: '',
    rememberMe: false
  })
}

onMounted(() =>
{
  // 组件挂载后的初始化逻辑
})
</script>

<style scoped>
.login-form {
  padding: 0;
  max-height: 100%;
  overflow: visible;
}

.login-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.login-actions {
  margin: var(--spacing-xl) 0 var(--spacing-lg);
}

.auth-divider {
  margin: var(--spacing-lg) 0;
}

.divider-text {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  padding: 0 var(--spacing-lg);
}

.social-login {
  margin-bottom: var(--spacing-lg);
}

.auth-switch {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  padding-top: var(--spacing-xl);
  border-top: 1px solid var(--color-border-light);
}

.switch-text {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

/* 表单样式优化 */
:deep(.el-form-item__label) {
  font-weight: 500;
  color: #606266;
  font-size: 14px;
  line-height: 40px;
}

:deep(.el-checkbox) {
  color: #606266;
  font-size: 14px;
}

:deep(.el-checkbox__label) {
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .login-options {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }

  .auth-switch {
    flex-direction: column;
    gap: var(--spacing-xs);
  }
}
</style>
